<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>银行业务系统登录</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #f4f7fb;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 1000px;
      margin: 135px auto;
      text-align: center;
    }

    .title {
      font-size: 36px;
      color: #1e2f45;
      margin-bottom: 50px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .login-wrapper {
      display: flex;
      justify-content: space-between;
      gap: 100px;
    }

    .login-box {
      width: 48%;
      background-color: #fff;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    h2 {
      color: #2b3f5c;
      margin-bottom: 20px;
    }

    .form-group {
      text-align: left;
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      color: #333;
    }

    input {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccd6e0;
      background-color: #eef4ff;
      font-size: 14px;
    }

    .btn {
      width: 100%;
      padding: 12px;
      background-color: #e1e8f0;
      border: none;
      border-radius: 6px;
      font-weight: bold;
      color: #2b3f5c;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn:hover {
      background-color: #d3dfea;
    }

    .flash {
      color: red;
      font-size: 14px;
      text-align: center;
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      .login-wrapper {
        flex-direction: column;
        gap: 30px;
      }

      .login-box {
        width: 100%;
      }
    }

    .alt-login {
      text-align: center;
      margin-top: 30px;
      font-size: 14px;
    }

    .alt-login a {
      color: #2b3f5c;
      text-decoration: underline;
      margin: 0 10px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="title">🏦 银行业务系统登录</div>

  <div class="login-wrapper">
    <!-- 管理员登录 -->
    <div class="login-box">
      <h2>管理员登录</h2>
      {% if admin_error %}
        <div class="flash">{{ admin_error }}</div>
      {% endif %}
      <form method="post" action="{{ url_for('login') }}">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" name="username" required>
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" name="password" required>
        </div>
        <button class="btn" type="submit">登录</button>
      </form>
    </div>

    <!-- 客户登录 -->
    <div class="login-box">
        <h2>客户登录</h2>
        <div class="alt-login">
            <form method="get" action="{{ url_for('login_sms') }}">
                <button type="submit" class="btn">📱 短信验证码登录</button>
            </form>
            <p style="margin-top:10px; font-size: 14px;">
                还没有账号？<a href="{{ url_for('register_sms') }}">立即注册</a>
            </p>
        </div>
    </div>
</div>
</body>
</html>
